<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            width: 100vw;
            height: 100vh;

            display: flex;
            justify-content: center;
            align-items: center;
        }
        .wrapper {
            padding: 10px 15px;
            width: 400px;
            height: 350px;
            background-color: #EEE9BF	;
            overflow: auto;
        }
        .wrapper div {
            margin-top: 10px;
            display: flex;
            align-items: flex-start;
        }
        input, textarea {
            flex: 1;
            outline: none;
            padding: 5px 15px;
        }
        div.any {
            justify-content: flex-end;
            align-items: center;
        }
        .any input {
            flex: 0;
        }
        button {
            display: block;
            margin: 0 auto;
            padding: 5px 20px;
            background-color: #B22222;
            color: white;
            outline: none;
            border: 1px solid #B22222;
        }
        .sep {
            height: 2px;
            background-color: #B9D3EE;
        }
        div.liuyan {
            display: block;
        }
        .liuyan > div {
            display: block;
        }
        .liuyan p {
            margin-right: 10px;
        }
        .liuyan > div > :last-child {
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <form action="">
            <div>
                <label for="">昵称:</label>
                <input type="text" id="name">
            </div>
            <div>
                <label for="">内容:</label>
                <textarea name="" id="content" cols="30" rows="10"></textarea>
            </div>
            <div class="any">
                <input type="checkbox" name="" id="any"> <label for="">匿名</label>
            </div>
            <div>
                <button id="btn">发表</button>
            </div>
        </form>
        <div class="sep"></div>
        <div class="liuyan">
            <!-- <div>
                <div>
                    <p>小明</p>
                    <p>下午2：09：09</p>
                </div>
                <div>
                    哈哈哈
                </div>
            </div> -->
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        const $name = $('#name');
        const $content = $('#content');
        const $any = $('#any');
        const $btn = $('#btn');
        const $liuyan = $('.liuyan');

        $btn.on('click', function (e) {
            e.preventDefault();
            let name = $name.val().trim();
            const content = $content.val().trim();

            if (!name || !content) {
                alert('昵称或内容不能为空');
                return;
            }

            if ($any.prop('checked')) {
                name = '路人甲';
            }

            $liuyan.append(`
                <div>
                    <div>
                        <p>${name}</p>
                        <p>${(new Date()).toLocaleString()}</p>
                    </div>
                    <div>
                        ${content}
                    </div>
                </div>
            `);

            $name.val('');
            $content.val('');
            $any.prop('checked', false);
        });
    </script>
</body>
</html>